<template>
    <div class="product">
        <div class="productlist">
            <ul>
                <li v-for="(product,index) of pruductLi" :key="index" @click="goPruct(product.id)" >
                    <router-link :to="{path:'/Home'}"> <img :src=product.list_pic_url
                            alt="">
                        <p>{{product.name}}</p>
                        <div class="prize">￥{{product.retail_price}}</div>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'YxProductpage',
        props: ["pruductLi"],
        data() {
            return {
            };
        },

        methods: {
            goPruct(id){
                   this.$router.push("/Productdetail?id="+id)
            }
        },
    };
</script>

<style lang="scss" scoped>
    .product {
        background-color: #fff;
        border-top: 1px solid #ccc;
        margin-bottom: .8rem;
        height: 100%;
    }

    .productlist ul {
        padding: .2rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        align-content: space-between;

        li {
            width: 3.45rem;
            padding-left: .1rem;
            margin-bottom: .1rem;

            img {
                width: 100%;
                border-radius: .2rem;
                height: 3.45rem;
            }

            p {
                margin-top: .16rem;
                line-height: .45rem;
                text-align: left;
                font-size: .3rem;
                font-weight: 500;
                text-overflow: ellipsis;
                overflow: hidden;
                color: #12161c;
                font-family: PingFangSC-Regular;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                word-break: break-all;
            }

            .prize {
                color: rgb(250, 30, 50);
                font-weight: bold;
            }
        }
    }

</style>
